
.app-layout {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f1f4f7;

  .app-sider {
    background-color: #19202E;
    color: #8C96A9;
    width: 240px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;

    &.is-moving {
      transition: none;
    }

    &.is-close {
      width: 0;
      padding: 0;
    }
  }

  .app-header {
    background-color: #fff;
    height: 58px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
    padding: 0 15px;
    z-index: 1;
  }

  .app-content {
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-footer {
    background-color: #fff;
    border-top: solid 1px #E2E3E4;
  }

  .m-page-enter-active {
    animation: page-in .3s;
  }
  .m-page-leave-active {
    animation: page-out .3s;
  }
  
  @keyframes page-in {
    0% {
      transform: translateX(-20px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes page-out {
    0% {
      transform: translateX(0,0,0);
      opacity: 1;
    }
    100% {
      transform: translateX(20px);
      opacity: 0;
    }
  }
}

.app-aside {
  .app-logo-box {
    box-sizing: border-box;
    height: 58px;
    line-height: 58px;
    padding: 0 15px;
    color: rgba(255,255,255, 0.9);
    overflow: hidden;
    transition: padding 0.2s ease;
    background-color: #1B8CE1;
    background-image: linear-gradient(20deg, #1C60E7 -20%, #1B8CE1);

    .app-logo {
      height: 35px;
      vertical-align: middle;
      margin-right: 10px;
      transition: all 0.3s ease;
    }

    .app-name {
      font-size: 1.3rem;
      vertical-align: middle;
    }
  }

  .app-menu-box {
    width: 100%;
    max-height: calc(100% - 58px);
    overflow: auto;
    position: absolute;
    box-sizing: border-box;
    padding-bottom: 50px;

    .menu-title {
      font-size: 12px;
      color: #5c6579;
      padding: 10px;
    }
    .menu-item-icon {
      margin-right: 7px;
    }
    .menu-item-label {
      margin-right: 10px;
    }
    .menu-item-des {
      opacity: 0.5;
      font-size: 12px;
    }

    .vc-menu-item .vc-menu-item--row,
    .vc-menu-item .vc-menu-item--label {
      transition: all 0.4s ease;
    }
    .vc-menu-item .vc-menu-item--row.is-hovered + .vc-menu-item--label,
    .vc-menu-item .vc-menu-item--row.is-clicked + .vc-menu-item--label {
      color: #F5F5FA;
    }

    /*滚动轨道*/
    &::-webkit-scrollbar-track {
      background-color: rgba(255,255,255, 0.1);
    }
    /*滚动条*/
    &::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-color: rgba(255,255,255, 0.1);
    }
    &::-webkit-scrollbar-thumb:hover{
      background-color: rgba(255,255,255, 0.3);
      border-width: 1px;
    }
  }
}

.env-test {
  .app-aside .app-logo-box {
    background-color: #f7683b;
    background-image: linear-gradient(20deg, #FF5722 -20%, #FF9800);
  }
}

.env-dev {
  .app-aside .app-logo-box {
    background-color: #c52129;
    background-image: linear-gradient(20deg, #c52129 -20%, #de3427);
  }
}

.app-sider.is-mini {
  .app-logo {
    width: 100%;
  }
  .app-name {
    display: none;
  }
}

.app-sider-control {
  width: 0px;
  position: relative;
  cursor: ew-resize;

  .collapse-btn {
    position: absolute;
    top: calc(50% - 18px);
    height: 36px;
    color: transparent;
    width: 24px;
    left: -1px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    z-index: 1000;

    &::before,
    &::after {
      content: "";
      background-color: rgb(76, 154, 255);
      width: 2px;
      height: 8px;
      position: absolute;
      left: 8px;
      opacity: 0.3;
      transform: rotate(0deg);
      border-radius: 16px;
      transition: transform 200ms ease-in-out 0s, opacity 300ms ease-in-out 200ms;
    }
    &::before {
      top: 10px;
      transform-origin: 1px 7px 0px;
    }
    &::after {
      top: 16px;
      transform-origin: 1px 1px 0px;
    }
    &:hover {
      &::before {
        transform: rotate(40deg);
      }
      &::after {
        transform: rotate(-40deg);
      }
    }
    &.close {
      &::before,
      &::after {
        left: 11px;
      }
      &:hover {
        &::before {
          transform: rotate(-40deg);
        }
        &::after {
          transform: rotate(40deg);
        }
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 100%;
    background-color: transparent;
    right: -7px;
  }

  &::before {
    content: "";
    height: 100%;
    width: 2px;
    left: 0px;
    top: 0;
    position: absolute;
    transition: background-color 300ms ease-in-out 200ms;
  }

  &:hover {
    .collapse-btn {
      &::before,
      &::after {
        opacity: 1;
      }
    }
  }

  &:hover:before {
    background: rgb(76, 154, 255);
  }
}

.app-header-box {
  .app-header-tool {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      display: inline-block;
      vertical-align: middle;
      line-height: 58px;
      padding: 0 10px;
      font-size: 0.95rem;
      color: #515a6e;
      background-color: rgba(255,255,255, 0.1);
      transition: background-color 0.3s linear;

      &:hover {
        // background-color: rgba(40,44,52, 0.03);
      }

      .tool-btn {
        border: none;
        background: transparent;
        cursor: pointer;
        color: inherit;

        &:hover {
          color: #121F29;
        }
      }

      .tool-search-input {
        border: none;
        border-radius: 5px;
        background-color: rgba(40,44,52, 0.03);
        height: 30px;
        outline: none;
        padding: 0 10px;
        width: 150px;
        transition: all 0.2s ease;
        
        &:focus {
          width: 300px;
        }
      }

      a {
        color: inherit;
        
        .fa-external-link {
          font-size: 0.8rem;
        }
      }

      img {
        vertical-align: middle;
      }
    }

    .user-avatar {
      border-radius: 3px;
      width: 32px;
      height: 32px;
    }

    .m-dropdown-panel,
    .m-css-dropdown-panel {
      min-width: 200px;
      border-radius: 0 0 3px 3px;
      margin-left: -10px;
  
      &.is-center {
        margin-left: 0px;
      }

      &.is-right {
        margin-right: -10px;
      }

      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background: transparent;
      }
      &::-webkit-scrollbar-corner {
        background: transparent;
      }
      &::-webkit-resizer{
        background: transparent;
      }
    }
  }
}
